<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="organizationRegister"
      @close="drawerReset"
      :closable="false"
      title="批量新增租户"
      :showFooter="false"
      isDetail
    >
      <div class="box-drawer">
        <div class="drawer-info">
          <info-circle-outlined :style="{ fontSize: '24px', marginRight: '14px', color: '#2a64f6' }" />
          <div class="info-txt">请先下载导入文件模版，按照模板要求填写新增企业信息后上传</div>
        </div>
        <div class="drawer-upload">
          <UploadFile :key="drawerInfo.key" @operateSuccess="operateSuccess" />
        </div>
        <div class="drawer-table">
          <div class="table-title">导入记录</div>
          <BasicTable @register="registerTable">
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'batchCount'">
                <span>{{ record.batchCount || 0 }}条</span>
              </template>
              <template v-else-if="column.dataIndex === 'batchStatus'">
                <span class="global-stop-status" v-if="record.batchStatus == 1">待处理</span>
                <span class="global-wait-status" v-else-if="record.batchStatus == 2">处理中</span>
                <span class="global-active-status" v-else-if="record.batchStatus == 3">已完成</span>
                <span class="global-error-status" v-else-if="record.batchStatus == 4">处理失败</span>
                <span v-else></span>
              </template>
              <template v-else-if="column.dataIndex === 'operate'">
                <div @click="viewData(record)" class="global-primary-text" v-if="record.batchStatus == 3">查看</div>
                <div class="global-disabled-text" v-else>查看</div>
              </template>
            </template>
          </BasicTable>
        </div>
      </div>
    </BasicDrawer>
    <BatchDetail @register="detailRegister" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { BasicDrawer, useDrawerInner, useDrawer } from '@/components/Drawer'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { BasicTable, useTable } from '@/components/Table'
import { constantMap } from '@/types/enum'
import UploadFile from './UploadFile.vue'
import BatchDetail from './BatchDetail.vue'
import api from '@/api'

const { batchInfoList } = api

const emit = defineEmits(['operateSuccess', 'register'])

const drawerInfo = reactive({
  key: 0
})

const [registerTable, { reload, setPagination, setTableData, setProps }] = useTable({
  api: batchInfoList,
  columns: [
    {
      title: '导入时间',
      dataIndex: 'createTime'
    },
    {
      title: '导入数据',
      align: 'right',
      dataIndex: 'batchCount'
    },
    {
      title: '导入状态',
      dataIndex: 'batchStatus'
    },
    {
      title: '操作人',
      width: 220,
      customEllipsis: true,
      dataIndex: 'createByUserName'
    },
    {
      title: '操作',
      width: 60,
      dataIndex: 'operate'
    }
  ],
  immediate: false, //初始化不请求数据
  pagination: { hideOnSinglePage: false }, // 只有一页时隐藏分页器
  showIndexColumn: true,
  scroll: { y: innerHeight > 700 ? 'calc(100vh - 520px)' : '200px', x: constantMap.tableXWidth }
})

const operateSuccess = () => {
  setPagination({
    current: 1,
    pageSize: 10,
    total: 0
  })

  reload()
}

const [detailRegister, { openDrawer: OrganizationDetailOpenDrawer }] = useDrawer()

const [organizationRegister, { closeDrawer, changeOkLoading }] = useDrawerInner((data) => {
  operateSuccess()
})
const viewData = (record: any) => {
  OrganizationDetailOpenDrawer(true, {
    record
  })
}
const drawerReset = () => {
  drawerInfo.key++
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 16px;
  position: relative;
  .drawer-info {
    height: 51px;
    padding: 14px 16px;
    background: #e9f4fe;
    border-radius: 2px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    .info-txt {
      font-size: 14px;
      color: #192236;
      font-weight: 600;
      line-height: 17px;
    }
  }
  .drawer-upload {
    margin-left: 16px;
    margin-bottom: 30px;
  }
  .drawer-table {
    .table-title {
      font-size: 12px;
      font-weight: 600;
      color: #535d71;
      line-height: 17px;
      padding-bottom: 8px;
      padding-left: 16px;
      margin-bottom: 8px;
      border-bottom: 1px solid #e8e8e8;
    }
  }
}
</style>
